<template>
  <a-card class="content" :bordered="false">
    <div class="table-page-search-wrapper">
      <a-form layout="inline">
        <a-row :gutter="48">
          <a-col :md="8" :sm="24">
            <a-form-item label="优惠券名称">
              <a-input v-model="queryParam.title" placeholder />
            </a-form-item>
          </a-col>
          <a-col :md="!advanced && 8 || 24" :sm="24">
            <span
              class="table-page-search-submitButtons"
              :style="advanced && { float: 'right', overflow: 'hidden' } || {} "
            >
              <a-button type="primary" @click="search">查询</a-button>
              <a-button style="margin-left: 8px" @click="() => queryParam = {}">重置</a-button>
            </span>
          </a-col>
        </a-row>
      </a-form>
    </div>

    <div class="table-operator">
      <a-button type="primary" icon="plus" @click="add()">新建</a-button>
    </div>

    <a-table
      ref="table"
      rowKey="id"
      size="middle"
      :columns="couponColumns"
      :dataSource="loadData"
      :pagination="pagination"
      :loading="loading"
      :scroll="{x:1500}"
      @change="handleTableChange"
    >
      <span slot="gmtStart" slot-scope="text">
        <span v-if="text === undefined">无</span>
        <span v-else>{{ text | formDate }}</span>
      </span>

      <span slot="gmtEnd" slot-scope="text">
        <span v-if="text === undefined">无</span>
        <span v-else>{{ text | formDate }}</span>
      </span>

      <span slot="days" slot-scope="text">
        <span v-if="text === undefined">无</span>
        <span v-else>{{text}}</span>
      </span>

      <span slot="status" slot-scope="text">
        <a-tag color="blue" v-if="text === undefined"></a-tag>
        <a-tag color="blue" v-if="text === 1">正常</a-tag>
        <a-tag color="blue" v-if="text === 0">下架</a-tag>
      </span>

      <span slot="discount" slot-scope="text">减免{{text/100}}元</span>

      <span slot="min" slot-scope="text">满{{text/100}}元可用</span>

      <span slot="categoryTitle" slot-scope="text">
        <a-tag color="blue" v-if="text === undefined">全部类目</a-tag>
      </span>

      <span slot="type" slot-scope="text">
        <a-tag color="blue" v-if="text == 1">满减券</a-tag>
      </span>

      <span slot="action" slot-scope="text, record">
        <template>
          <a-button type="primary"  class="flyray-btn" v-if="record.status==0"
            @click="jihvisible=true;jihData=record">激活</a-button>
          <a-button type="primary"  class="flyray-btn" v-if="record.status==1"
            @click="dojvisible=true;jihData=record">冻结</a-button>
          <a-button type="primary"  class="flyray-btn" @click="det(record)">查看</a-button>
          <a-button type="danger" class="table-danger flyray-btn"  @click="delvisible=true;delData=record">删除</a-button>

        </template>
      </span>
    </a-table>
    <a-modal title="创建" :visible="visible" @ok="addCoupon" @cancel="handleCancel" width="700px">
      <a-form :form="form" @submit="handleSubmit">
        <a-form-item label="优惠券名称：" :label-col="{ span: 5 }" :wrapper-col="{ span: 12 }">
          <a-input v-decorator="['title', { rules: [{ required: true, message: '请输入优惠券名称' }] }]" />
        </a-form-item>
        <a-form-item label="优惠券类型：" :label-col="{ span: 5 }" :wrapper-col="{ span: 12 }">
          <a-select
            v-decorator="[
              'type',
              { rules: [{ required: true, message: '请选择优惠卷类型' }] },
            ]"
            placeholder="满减券"
            @change="handleSelectChange"
          >
            <a-select-option value="1">满减券</a-select-option>
          </a-select>
        </a-form-item>
        <a-form-item label="介绍：" :label-col="{ span: 5 }" :wrapper-col="{ span: 12 }">
          <a-input v-decorator="[
              'description',
            ]" />
        </a-form-item>
        <a-form-item label="优惠券数量：" :label-col="{ span: 5 }" :wrapper-col="{ span: 12 }">
          <a-input
            v-decorator="['total', { rules: [{ required: true, message: '请输入优惠卷数量' }] }]"
            addonAfter="张"
          />
        </a-form-item>
        <a-form-item label="每人限额：" :label-col="{ span: 5 }" :wrapper-col="{ span: 12 }">
          <a-input
            v-decorator="['limit', { rules: [{ required: true, message: '请输入限额' }] }]"
            addonAfter="张"
          />
        </a-form-item>
        <a-form-item label="满减金额：" :label-col="{ span: 5 }" :wrapper-col="{ span: 12 }">
          <a-input
            v-decorator="['discount', { rules: [{ required: true, message: '请输入满减金额' }] }]"
            addonAfter="元"
          />
        </a-form-item>
        <a-form-item label="最低消费：" :label-col="{ span: 5 }" :wrapper-col="{ span: 12 }">
          <a-input
            v-decorator="['min', { rules: [{ required: true, message: '请输入最低消费' }] }]"
            addonAfter="元"
          />
        </a-form-item>
        <a-form-item label="优惠券状态：" :label-col="{ span: 5 }" :wrapper-col="{ span: 12 }">
          <a-select
            v-decorator="[
              'status',
              { rules: [{ required: true, message: '请选择优惠券状态' }] },
            ]"
            placeholder="正常"
            @change="handleSelectChange"
          >
            <a-select-option value="1">正常</a-select-option>
            <a-select-option value="2">下架</a-select-option>
          </a-select>
        </a-form-item>

        <a-form-item label="有效期：" :label-col="{ span: 5 }" :wrapper-col="{ span: 12 }">
          <a-radio-group :style="{ marginBottom: '8px' }" buttonStyle="solid" defaultValue="1">
            <a-radio-button value="1" @click="creatdays">领券相对天数</a-radio-button>
            <a-radio-button value="2" @click="creatdays">指定绝对时间</a-radio-button>
          </a-radio-group>
          <a-input v-if="creatdayCange" v-decorator="['days']" addonAfter="天" />
          <a-range-picker v-else v-decorator="['range_picker']" />
        </a-form-item>

        <a-form-item label="商品限制范围：" :label-col="{ span: 5 }" :wrapper-col="{ span: 12 }">
          <a-radio-group :style="{ marginBottom: '8px' }" buttonStyle="solid" defaultValue="1">
            <a-radio-button value="1" @click="range">全场通用</a-radio-button>
            <a-radio-button value="2" @click="range">指定分类</a-radio-button>
          </a-radio-group>
        </a-form-item>
        <a-form-item
          label="优惠类目："
          :colon="false"
          :label-col="{ span: 5 }"
          :wrapper-col="{ span: 15 }"
          v-if="!creatrangeCange"
        >
          <el-cascader
            ref="cascader"
            @change="handleChange2()"
            :options="options1"
            :props="{ checkStrictly: true }"
            clearable
          ></el-cascader>
        </a-form-item>
      </a-form>
    </a-modal>
    <a-modal title="详情" :width="951" :visible="devisible" @ok="handleCancel" @cancel="handleCancel">
      <a-form :form="form" style="width: 60%">
        <a-form-item label="优惠券名称" :labelCol="labelCol" :wrapperCol="wrapperCol">
          <a-input :value="addData.title" disabled />
        </a-form-item>
        <a-form-item label="优惠券类型" :labelCol="labelCol" :wrapperCol="wrapperCol">
          <a-select :value="addData.type" disabled>
            <a-select-option :value="1">满减券</a-select-option>
          </a-select>
        </a-form-item>
        <a-form-item label="优惠券数量" :labelCol="labelCol" :wrapperCol="wrapperCol">
          <a-input-number :value="addData.total+'张'" disabled />
        </a-form-item>
        <a-form-item label="每人限领" :labelCol="labelCol" :wrapperCol="wrapperCol">
          <a-input-number :value="addData.limit+'张'" disabled />
        </a-form-item>
        <a-form-item label="满减金额" :labelCol="labelCol" :wrapperCol="wrapperCol">
          <a-input-number :value="addData.discount/100+'元'" disabled />
        </a-form-item>
        <a-form-item label="最低消费" :labelCol="labelCol" :wrapperCol="wrapperCol">
          <a-input-number :value="addData.min/100+'元'" disabled />
        </a-form-item>
        <a-form-item label="状态" :labelCol="labelCol" :wrapperCol="wrapperCol">
          <a-select :value="addData.status" disabled>
            <a-select-option :value="0">下架</a-select-option>
            <a-select-option :value="1">正常</a-select-option>
          </a-select>
        </a-form-item>
        <a-form-item label="有效期" :labelCol="labelCol" :wrapperCol="wrapperCol">
          <a-radio-group class="days" default-value="horizontal" disabled>
            <span :class="{active:addData.days!=undefined}">领券相对天数</span>
            <span :class="{active:addData.gmtStart!=undefined}">指定绝对时间</span>
          </a-radio-group>
        </a-form-item>
        <a-form-item
          label=" "
          :colon="false"
          :labelCol="labelCol"
          :wrapperCol="wrapperCol"
          v-if="addData.days"
        >
          <a-input-number :value="addData.days" disabled />
        </a-form-item>
        <a-form-item label=" " :colon="false" :labelCol="labelCol" :wrapperCol="wrapperCol" v-else>
          <span class="gmtday">{{addData.gmtStart|formDate}}</span>
          <span :style="{ display: 'inline-block', width: '24px', textAlign: 'center' }">至</span>
          <span class="gmtday">{{addData.gmtEnd|formDate}}</span>
        </a-form-item>
      </a-form>
    </a-modal>
    <a-modal
      title="提示"
      :width="500"
      :visible="delvisible"
      @ok="handleOk"
      @cancel="delvisible=false"
    >
      <p>此操作将永久删除该优惠卷{{delData.title}}, 是否继续?</p>
    </a-modal>
    <a-modal title="提示" :width="500" :visible="dojvisible" @ok="freeze" @cancel="dojvisible=false">
      <p>此操作将冻结该优惠卷{{dojData.title}}, 是否继续?</p>
    </a-modal>
    <a-modal title="提示" :width="500" :visible="jihvisible" @ok="up" @cancel="jihvisible=false">
      <p>此操作将激活该优惠卷{{jihData.title}}, 是否继续?</p>
    </a-modal>
  </a-card>
</template>

<script>
import { getRoleList } from '@/api/manage'
import { getList, getClass, deleteCoupon, activation, frozen, addCoupon } from '@/api/mall/coupon'
import { couponColumns, statusMap } from '@/const/crud/mall/coupon.config'

export default {
  name: 'TableList',
  components: {
  },
  data() {
    return {
      couponColumns,
      statusMap,
      // 高级搜索 展开/关闭
      formLayout: 'horizontal', //表单布局
      creatdayCange: true, //判断有效期显示
      creatrangeCange: false, //判断优惠类目显示
      parenum: 0,
      options1: [], //类目数组
      advanced: false,
      loading: true,
      // 查询参数
      queryParam: {
        title: null
      },
      parameter: {
        pageNo: 1,
        pageSize: 10,
        title: null,
        id: null,
        status: null
      },
      pagination: {
        total: 0,
        pageSize: 10,
        showTotal: total => `共有 ${total} 条数`,
        showSizeChanger: true,
        pageSizeOptions: ['10', '20', '30', '40'],
        onShowSizeChange: (current, pageSize) => (this.pageSize = pageSize)
      },
      // 加载数据方法 必须为 Promise 对象
      loadData: [],
      delData: [],
      dojData: [],
      jihData: [],
      addData: {
        title: undefined,
        type: undefined,
        total: undefined,
        limit: undefined,
        discount: undefined,
        min: undefined,
        status: undefined,
        days: undefined,
        gmtEnd: undefined,
        gmtStart: undefined
      },
      labelCol: {
        xs: { span: 24 },
        sm: { span: 7 }
      },
      wrapperCol: {
        xs: { span: 24 },
        sm: { span: 13 }
      },
      visible: false,
      devisible: false,
      delvisible: false,
      dojvisible: false,
      jihvisible: false,
      form: this.$form.createForm(this)
    }
  },
  created() {
    this.getDataList()
    getClass(Object.assign(this.parameter)).then(res => {
        this.options1 = res.data
      })
  },
  methods: {
    creatdays(e) {
      //有效期切换
      if (e.target.value == 1) {
        this.creatdayCange = true
      } else {
        this.creatdayCange = false
      }
    },
    range(e) {
      //商品限制范围切换
      if (e.target.value == 1) {
        this.creatrangeCange = true
      } else {
        this.creatrangeCange = false
      }
    },
    handleChange2(value) {
      //类目
      let nodesObj = this.$refs['cascader'].getCheckedNodes()
      this.parenum = nodesObj[0].data.value
    },
    handleSelectChange() {},
    handleOk() {
      this.delvisible = false;
      this.parameter.id = this.delData.id;
      deleteCoupon(Object.assign(this.parameter)).then(res => {
        this.getDataList()
      })
    },
    det(record) {
      this.devisible = true
      this.addData = record
    },
    search() {
      this.parameter.title = this.queryParam.title
      this.getDataList()
    },
    getDataList() {
      getList(Object.assign(this.parameter)).then(res => {
        this.loadData = res.data.items
        this.loading = false
        this.pagination.total = res.data.total
      })
    },
    handleTableChange(pagination) {
      this.parameter.pageNo = pagination.current //点击的页码
      this.parameter.pageSize = pagination.pageSize //一页显示多少条
      this.getDataList()
    },
    add() {
      this.visible = true
      this.creatdayCange = true
      this.creatrangeCange = true
    },
    up(status) {
      console.log(status)
      this.jihvisible = false;
      this.parameter.id = this.jihData.id;
      this.parameter.status = status;
      activation(Object.assign(this.parameter)).then( res =>{
        this.getDataList()
      })
    },
    freeze() {
      this.dojvisible = false;
      this.parameter.id = this.dojData.id;
      this.parameter.status = 0;
      frozen(Object.assign(this.parameter)).then(res=>{
        this.getDataList()
      })
    },
    addCoupon() {
      //创建优惠券
      this.form.validateFields((err, values) => {
        if (!err) {
          this.visible = false
          this.form.resetFields()
          var data = {}
          if (this.creatrangeCange) {
            data.categoryId = null
          } else {
            data.categoryId = this.parenum
          }
          if (this.creatdayCange) {
            data.days = values.days
          } else {
            data.gmtStart = values.range_picker[0]._d.getTime();
            data.gmtEnd = values.range_picker[1]._d.getTime();
          }
          data.title = values.title
          data.type = values.type
          data.total = values.total
          data.limit = values.limit
          data.discount = values.discount * 100
          data.min = values.min * 100
          data.status = values.status
          data.description = values.description
          addCoupon(Object.assign(data)).then(res=>{
            this.$message.success('优惠券创建成功');
            this.getDataList()
          })
          this.addData = {}
        } else {
          console.log(err)
          this.$message.error('优惠券创建失败');
        }
      })
    },
    handleSubmit(e) {
      e.preventDefault()
      this.form.validateFields((err, values) => {
        if (!err) {
          console.log('Received values of form: ', values)
        }
      })
    },
    handleCancel() {
      this.visible = false
      this.devisible = false
      this.addData = {}
    }
  }
}
</script>
<style scoped>
.flyray-btn {
  font-size: 12px;
  padding: 0 7px;
  margin: 0 0 0 3px;
  height: 24px;
}
.table-danger,
.table-danger:focus {
  color: #fff;
  background-color: #ff4d4f;
  border-color: #ff4d4f;
  margin-left: 5px;
}
.days span {
  display: inline-block;
  color: #c0c4cc;
  cursor: not-allowed;
  background-color: #fff;
  border: 1px solid #ebeef5;
  border-radius: 4px 0 0 4px;
  padding: 10px 20px;
  font-size: 14px;
  line-height: 1;
}
.days .active {
  background-color: #f2f6fc;
}
.gmtday {
  display: inline-block;
  background-color: #f5f7fa;
  border: 1px solid #e4e7ed;
  color: #c0c4cc;
  cursor: not-allowed;
}
</style>
